import { useEffect } from "react";
import { useModel, useOutletContext, history } from "umi";
import { useReactive } from "ahooks";
import { IconPlusCircle, IconRefresh, IconDelete, IconEdit, IconHelpCircle } from "@douyinfe/semi-icons";
import { Card as SemiCard, Button, ButtonGroup, TabPane, Tabs, List } from "@douyinfe/semi-ui";
import { Table, Space, message, Divider, Popconfirm, Image as AntdImage, Card, Row, Col, Carousel, Alert, Avatar, Tooltip } from "antd";
import { v4 as uuidv4 } from "uuid";

const HomePageRecommendStore = ({}) => {
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent, setModalStyle } = useModel("global.modal");
    const { selectItem, cardBodyHeight } = useOutletContext();
    const { defaultImageBase64 } = useModel("global");

    const deleteStore = async (record) => {};
    const renderOperate = (_, r, i) => (
        <Space size={0}>
            <Popconfirm title="确认要删除该推荐门店吗？" okButtonProps={{ loading: false }} onConfirm={() => deleteStore(r)}>
                <Button icon={<IconDelete style={{ color: "#E91E63" }} />}></Button>
            </Popconfirm>
        </Space>
    );
    return (
        <Card
            title="推荐门店"
            bordered={false}
            bodyStyle={{ padding: 0 }}
            extra={
                <ButtonGroup>
                    <Button>添加推荐门店</Button>
                </ButtonGroup>
            }
        >
            <Table bordered={false} dataSource={[1]} rowKey="ciUuid" pagination={false} scroll={{ y: cardBodyHeight - 56 - 62 }}>
                <Table.Column title="顺序" align="center" width={60} render={(_, r, i) => i + 1} />
                <Table.Column title="门店名称" dataIndex="ciName" key="ciName" width={150} align="left" />
                <Table.Column title="门店地址" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="门店联系方式" dataIndex="ciName" key="ciName" width={120} align="right" />

                <Table.Column title="操作" width={90} align="center" render={renderOperate} />
            </Table>
        </Card>
    );
};

export default HomePageRecommendStore;
